<template>
  <div>
    <div class="box" @mousemove="mouseMove">
      <h2>当前鼠标坐标X----{{ clientX }}</h2>
      <h2>当前鼠标坐标Y----{{ clientY }}</h2>
      <button @click="getBeautyImg">点击获取美女图片</button>
      <div class="box_img">
        <h3 class="h3_wu">暂无数据</h3>
        <img :src="imgUrl" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
// 引入
import { ref } from 'vue';
import axios from 'axios';
import getMouseMove from './hooks/useMouseMove';
import getBeauty from './hooks/useBeautyImg';

const { clientX, clientY, mouseMove } = getMouseMove();
const { imgUrl, getBeautyImg } = getBeauty();
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}

.box {
  width: 1880px;
  height: 900px;
  border: 1px solid red;
}
img {
  width: 500px;
}
.box_img {
  width: 500px;
  height: auto;
  border: 1px solid black;
}
.h3_wu {
  text-align: center;
  position: absolute;
  z-index: -1;
}
</style>
